<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- /导航栏 -->
    <!-- 4个操作按钮 -->
    <input ref="myFile" @change="chooseImg" type="file" style="display: none" />

    <van-cell title="头像" @click="$refs.myFile.click()" is-link>
      <van-image class="avatar" fit="cover" round :src="usrInfo.photo" />
    </van-cell>

    <van-cell
      title="昵称"
      @click="isShowName = true"
      :value="usrInfo.name"
      is-link
    />
    <van-cell
      title="性别"
      @click="isShowGender = true"
      :value="usrInfo.gender ? '女' : '男'"
      is-link
    />
    <van-cell
      title="生日"
      @click="isShowBirthday = true"
      :value="usrInfo.birthday"
      is-link
    />

    <!-- 1修改昵称 弹出框 -->
    <van-popup
      v-model="isShowName"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <UpdateName @closePop="isShowName = $event" :usrInfo="usrInfo" />
    </van-popup>

    <!-- 2修改性别 弹出框 -->
    <van-popup
      v-model="isShowGender"
      position="bottom"
      :style="{ height: '45%' }"
    >
      <UpdateGender
        @closePop="
          isShowGender = false;
          usrInfo.gender = $event;
        "
        :usrInfo="usrInfo"
      />
    </van-popup>

    <!-- 3修改生日 弹出框 -->
    <van-popup
      v-model="isShowBirthday"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <UpdateBirthday
        @closePop="
          isShowBirthday = false;
          usrInfo.birthday = $event;
        "
        :usrInfo="usrInfo"
      />
    </van-popup>

    <!-- 4修改头像 弹出框 -->
    <van-popup
      v-model="isShowAvatar"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <UpdateAvatar
        @closePop="
          isShowAvatar = false;
          usrInfo.photo = $event;
        "
        @onClose="isShowAvatar = false"
        :imgData="imgData"
      />
    </van-popup>
  </div>
</template>

<script>
import { getProfile } from '@/api/user.js';

// 引入 各种修改组件
import UpdateName from './components/update-name.vue';
import UpdateGender from './components/update-gender.vue';
import UpdateBirthday from './components/update-birthday.vue';
import UpdateAvatar from './components/update-avatar.vue';

export default {
  name: 'profile',
  props: {},
  data() {
    return {
      imgData: null,
      isShowName: false,
      isShowGender: false,
      isShowBirthday: false,
      isShowAvatar: false,
      usrInfo: {},
    };
  },
  async created() {
    // 请求 用户详细信息
    const { data: resBody } = await getProfile();
    // 挂载到data中
    this.usrInfo = resBody.data;
  },
  methods: {
    // 选中图片事件
    chooseImg() {
      if (this.$refs.myFile.files.length === 0) return;
      // 文件选择框的 files 属性，返回一个 包含选中图片信息的 伪数组
      // 先将 图片信息对象，转成 一个 虚拟地址
      this.imgData = URL.createObjectURL(this.$refs.myFile.files[0]);
      // 打开 修改头像 弹出框
      this.isShowAvatar = true;
    },
  },
  computed: {},
  watch: {},
  components: { UpdateName, UpdateGender, UpdateBirthday, UpdateAvatar },
};
</script>

<style lang="less" scoped>
.user-profile {
  .avatar {
    width: 60px;
    height: 60px;
  }
}
</style>
